<template>
	<view class="article">
		<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
			<view class="container">
				<view class="wrap">
					<view class="like" @click="shiftLike">
						<image v-if="likeStatus === 0" :src="$buildFullImageUrl('/static/article/like.svg')"></image>
						<image v-if="likeStatus === 1" :src="$buildFullImageUrl('/static/article/likeSel.svg')"></image>
					</view>
					<view class="title">{{ dataObj.title }}</view>
					<view class="tab">
						<text>作者：{{ dataObj.author }}</text>
						<text>上传日期：{{ dataObj.createTime }}</text>
					</view>
					<!-- <view class="con">
						
					</view> -->
					<u-parse :content="content" @preview="preview" @navigate="navigate"></u-parse>
					<!-- <view class="conY">
						{{ dataObj.summary }}
					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getAppArticle, getArticleUser, setArticleUser } from '@/api/index/index.js';
import uParse from '@/components/u-parse/u-parse.vue';
import config from '@/config';
export default {
	data() {
		return {
			dataObj: {},
			content: '',
			likeStatus: 0, //0不喜欢，1喜欢
			likeObj: {},
			articleId: 0
		};
	},
	components: {
		uParse
	},
	onLoad(options) {
		// console.log(options);
		this.articleId = options.articleId;
		this.initAppArticle(options.articleId);
	},
	methods: {
		initAppArticle(id) {
			getAppArticle(id).then((res) => {
				this.dataObj = res.data;
				console.log(this.dataObj.content);
				this.content = this.content.replace(/<img/gi, '<img style="max-width:100%;height:auto;">');
				this.content = this.addDomainToImgSrc(this.dataObj.content, config.baseUrl);
				console.log(this.content);
				// this.content = this.content.replace(/<img/gi, '< img style="max-width:100%;height:auto;"');
				
			});
			getArticleUser({
				articleId: id
			}).then((res) => {
				this.likeObj = res.data;
				this.likeStatus = Number(res.data.likeStatus);
			});
		},
		preview(src, e) {
			// do something
		},
		navigate(href, e) {
			// do something
		},
		shiftLike() {
			if (this.likeStatus === 0) {
				this.likeObj.likeStatus = '1';
			} else if (this.likeStatus === 1) {
				this.likeObj.likeStatus = '0';
			}
			let data = {
				articleId: 0,
				createBy: '',
				createTime: '',
				id: 0,
				likeStatus: '',
				params: {},
				remark: '',
				updateBy: '',
				updateTime: '',
				userId: 0
			};
			this.updateExistingFields(data, this.likeObj);
			setArticleUser(data).then((res) => {
				this.initAppArticle(this.articleId);
			});
		},
		updateExistingFields(target, source) {
			// 遍历目标对象的自身属性
			for (const key of Object.keys(target)) {
				if (key in source && source[key] !== null) {
					// 如果源对象有同名字段
					target[key] = source[key];
				}
			}
			return target;
		},
		addDomainToImgSrc(html, domain) {
			// 正则匹配所有 img 标签的 src 属性（排除已包含协议的 URL）
			const regex = /<img\s+[^>]*src=(['"])(?!(?:https?:\/\/|\/\/))([^"']+)\1/gi;
			return html.replace(regex, (match, quote, src) => {
				// 拼接域名和路径
				return match.replace(src, `${domain}${src}`);
			});
		}
	}
};
</script>

<style scoped lang="less">
@import url('@/components/u-parse/u-parse.css');
.article {
	width: 100%;
	// height: 100%;
	min-height: 100%;
	overflow: hidden;
	.scrollWrap {
		width: 100%;
		// height: 100%;
	}
	.container {
		width: 100%;
		height: 100%;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		background-color: #e0e6e6;

		.wrap {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;

			.like {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 30rpx;
				top: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				width: calc(100% - 60rpx);
				text-align: left;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}

			.tab {
				width: 100%;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				> text:nth-child(1) {
					margin-right: 30rpx;
				}
			}

			.con {
				width: 100%;
				background-color: #cdd6e1;
				margin-top: 30rpx;
			}

			.conY {
				width: 100%;
				background-color: #cdd6e1;
				padding: 50rpx 30rpx;
				box-sizing: border-box;
			}
		}
	}
}
</style>
